<template>
    <ul class="flex-box">
        <li v-for="(item,index) in allInfo.tags" :key="item" class="mr10 tag"
            :class="{selected:allInfo.selectTags === item.href}">
            <!-- :class表示动态类 -->
            <!-- <router-link :to=item.href> 字符串情况使用 :to={item} 访问 -->
            <router-link :to=item.href @click="handleClick(item.href)">
            {{item.title}}
            </router-link>
            <el-icon @click="handleClose(item.href,index)"><Close /></el-icon>
        </li>
    </ul>
</template>

<script setup>
    import { allInfoStore } from '../store/all.js'
    const allInfo = allInfoStore();

    import { useRouter,useRoute } from 'vue-router'
    const router = useRouter();
    const route = useRoute();

    //不存在缓存tags且当前非首页进行追加
    if (!allInfo.tags.length && route['name'] !== '/') {
        const pathInfo = {};
        pathInfo.href = route['name']
        pathInfo.title = route['meta']['title']
        allInfo.tags.push(pathInfo);
        allInfo.changSelectedTag(pathInfo.href);
    }

    //关闭tabs菜单
    const handleClose = function (data,index) {
        allInfo.delMenu(data);

        let targetSelectTags = '';//高亮tag目标

        if (data !== allInfo.selectTags) {//点击非当前页
            return;
        }
        if (index === allInfo.tags.length) {//删除最后一项
            if (!allInfo.tags.length) {//只有一个元素
                router.push('/')
            } else {
                targetSelectTags = allInfo.tags[index - 1].href
                router.push({path: targetSelectTags})
            }
        } else {
            targetSelectTags = allInfo.tags[index + 1].href
            router.push({path: targetSelectTags})
        }
        allInfo.changSelectedTag(targetSelectTags);
    }

    //点击tag
    const handleClick = function (data) {
        allInfo.changSelectedTag(data);
    }
</script>

<style>
    .tag:hover{
        color: #409eff;
    }
    .selected{
        color: #409eff;
    }
</style>

